<!-- template for the modal component -->
<template>
    <div class="row" style="margin: 88px 0;text-align: center;">
        <div class="col-sm-12 col-xs-12" v-if="pages.length > 1">
            <!--<template v-for="page in pages">-->
                <!--<template v-if="page < 3">-->
                    <!--<a class="btn page-btn enable-btn left-margin" @click.stop="goPage(page)"  :class="{'current-page-btn': currentPage==page}">-->
                        <!--<span >{{page}}</span>-->
                    <!--</a>-->
                <!--</template>-->
                <!--<template v-else-if="page > pages.length -3">-->
                    <!--<a class="btn page-btn enable-btn left-margin" @click.stop="goPage(page)"  :class="{'current-page-btn': currentPage==page}">-->
                        <!--<span >{{page}}</span>-->
                    <!--</a>-->
                <!--</template>-->
                <!--<template v-else="page === 3">-->
                    <!--<span class="ml-3 mr-1">......</span>-->
                    <template v-for="page in pages">
                        <span v-if="page == -1" class="pl-3"> ...</span>
                        <a v-else @click.stop="goPage(page)" class="btn page-btn enable-btn left-margin" :class="{'current-page-btn': currentPage==page}">{{page}}</a>
                    </template>

            <!--</template>-->
            <template>
                <a class="btn previous-and-next-btn" style="margin-left: 27px;" @click.stop="clickPrev"
                   :class="{'enable-btn-pre': currentPage != 1 , 'disable-btn': currentPage == 1 , 'disabled': currentPage == 1}">
                    <span ><</span>
                </a>
                <a class="btn previous-and-next-btn "  @click.stop="clickNext"
                   :class="{'enable-btn-pre': currentPage != pageCount , 'disable-btn': currentPage == pageCount , 'disabled': currentPage == pageCount}">
                    <span>></span>
                </a>
            </template>
        </div>
    </div>

</template>

<script>
  module.exports = {
    props: {
      'pageCount': {
        type: Number,
        required: true
      },
      'total': {
        type: Number
      },
      'pageRange': {
        type: Number,
      },
      'marginPages': {type: Number, default: 1},
      'currentPage': {type: Number, default: 1}
    },
//        created: function () {
//            this.refresh();
//        },
    data: function () {
      return {
        prevPage: 0,
        nextPage: 1,
        firstPage: 1,
        lastPage: this.pageCount
      };
    },
    methods: {
      clickPrev: function () {
        if (this.currentPage == 1){
          return false;
        }else{
          this.$emit('goPage', {page: this.currentPage - 1});
        }
      },
      clickNext: function () {
        if (this.currentPage == this.pageCount){
          return false;
        }else{
          this.$emit('goPage', {page: this.currentPage + 1});
        }
      },
      goPage: function (page) {
        this.$emit('goPage', {page: page});
      },
      refresh: function () {


      }
    },
    computed: {
      pages: function(){
        let marginPages = 4;
        let showMarginPageCount = 10;
        let pages = [];
        if (this.pageCount > 10) {
          if (this.currentPage <= marginPages + 1) {
            pages = [1, 2, 3, 4, 5, 6, 7, 8, 9];
          } else if (this.currentPage >= this.pageCount - ( marginPages + 1)) {
            pages = [this.pageCount - 8, this.pageCount - 7, this.pageCount - 6, this.pageCount - 5, this.pageCount - 4, this.pageCount - 3, this.pageCount - 2, this.pageCount - 1, this.pageCount];
          } else {
            for (let i = this.currentPage - marginPages; i <= this.currentPage + marginPages; i++) {
              pages.push(i);
            }
              pages.unshift(-1);
              pages.push(-1);
          }
        } else {
          for (let i = 1; i <= this.pageCount; i++) {
            pages.push(i);
          }
        }

        return pages;
      }
    }
  }
</script>

<style lang="scss">
    .previous-and-next-btn {
        text-align: center;
        width: 30px;
        height: 30px;
        font-size: 14px;
        display: inline-block;
        padding: 0px;
        line-height:28px;
        margin: 0 -1px;
        border-radius: 0px;
        &:hover,&:focus{
            border: 1px solid #6c7d43 !important;
            background-color: #f4f9eb !important;
            color: #828ea6!important;
        }
    }
    .disable-btn {
        background-color: #868686;
        color: #fff !important;
    }
    .current-page-btn {
        border: 1px solid #6c7d43 !important;
        background-color: #f4f9eb !important;
        color: #fff;
    }
    .enable-btn {
        /*background-color: transparent;*/
        /*transition: all .5s;*/
        background: #f2f3f7;
        border: 1px solid #c9d1de;
        /*color: #2c2c2c;*/
    }
    .enable-btn-pre{
        background: #d2d2d2;
        color: #fff !important;
    }
    .enable-btn:hover {
        border: 1px solid #6c7d43 ;
        /*color:#2c2c2c;*/
    }
    .page-btn {
        text-align: center;
        color: #828ea6;
        width: 30px;
        height: 30px;
        line-height:28px;
        display: inline-block;
        padding: 0px;
        border: 1px solid #c9d1de;
        border-radius: 0px;
    }
    .left-margin{
        margin-left: 15px;
    }
</style>